<template>
	<view class="zdzcRecordDetailMain">
		<view class="zdzcRecordDetailBox" v-for="(item,index) in detailData" :key="index">
			<view class="headerBox flex align-center justify-center">
				<view class="status flex align-center" v-if="item.status == 1">
					<view class="green flex align-center justify-center">
						<u-icon name="checkmark" color="#fff" size="30"></u-icon>
					</view>
					费率修改成功
				</view>
				<view class="status flex align-center" v-if="item.status == 2">
					<view class="red flex align-center justify-center">
						<u-icon name="close" color="#fff" size="30"></u-icon>
					</view>
					费率修改失败
				</view>
			</view>
			<view class="bodyBox">
				<view class="innerTitle flex align-center justify-center"><text>修改信息</text></view>
				<view class="serviceFree">
					<view>商户名称：<text>{{mercNm}}（ {{item.mercId }} ） </text></view>
					<view>修改时间：<text>{{item.createTime}}</text></view>
					<view>生效时间：<text>{{item.effectiveDate}}</text></view>
					<view>修改渠道：<text>{{item.operator}}</text></view>
					<view v-if="item.remark">备注信息：<text>{{item.remark}}</text></view>
				</view>

				<view class="innerTitle flex align-center justify-center" style="margin-top: 30rpx"><text>费率信息</text>
				</view>
				<view class="itemBox clearfix">
					<view class="item" v-for="date in item.feeList">
						<text>{{date.value}}</text>
						{{date.label}}
					</view>
				</view>
			</view>
		</view>

		<view class="noMachine flex align-center" v-if="detailData.length == 0 && isLoad">
			<image src="../../static/images/noData/zwsy.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<toast></toast>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,

				id: "",
				mercNm: '',

				detailData: [],
				isLoad: false,
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.mercNm = options.mercNm;
			this.getOperateData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			getOperateData() {
				this.$u.api
					.changeMerchantFeeLog({
						mercId: this.id,
					})
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							this.detailData = datas;
						}
						this.isLoad = true;
						uni.stopPullDownRefresh();
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
		},
	};
</script>
<style lang="scss">
	.zdzcRecordDetailMain {
		padding: 20rpx;
	}

	.zdzcRecordDetailBox {
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 3rpx 5rpx 8rpx #ccc;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.headerBox {
			margin: 0 auto;
			padding: 40rpx;
			background: #f5f5f5;
			width: 610rpx;
			min-height: 130rpx;
			border-radius: 10rpx;

			.status {
				>view {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50rpx;
					margin-right: 20rpx;

					&.green {
						background: rgba(68, 181, 73, 1);
					}

					&.red {
						background: #f33;
					}
				}
			}
		}

		.bodyBox {
			padding: 30rpx;

			.innerTitle {
				font-size: 30rpx;
				width: 160rpx;
				margin: 0 auto;
				color: #333;
				font-weight: bold;
				padding: 0 10rpx;
				text-align: center;
				position: relative;
				margin-bottom: 40rpx;

				text {
					position: relative;
					z-index: 9;
				}

				&:after {
					content: "";
					display: block;
					width: 80%;
					height: 20rpx;
					background: rgba(249, 72, 52, 0.2);
					border-radius: 30rpx;
					position: absolute;
					left: 50%;
					bottom: -5rpx;
					margin-left: -40%;
				}
			}

			.itemBox {
				background: #f5f5f5;
				border-radius: 10rpx;
				padding: 20rpx;

				.item {
					width: 33.33333333%;
					text-align: center;
					float: left;
					font-size: 24rpx;
					padding: 20rpx 0;

					text {
						display: block;
						font-size: 28rpx;
						font-weight: bold;
						padding-bottom: 6rpx;
					}
				}
			}

			.serviceFree {
				background: #f5f5f5;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				flex-direction: column;
				padding: 20rpx;
				font-family: numberFont;


				view {
					margin-bottom: 8rpx;

					text {
						color: #7d7d7d;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
